import React, { Component } from "react";
import styles from "./apimanagement.css";
import { Button, Icon, Table } from "antd";
import ApiEdit from "./component/ApiEdit";
import ApiView from "./component/ApiView";

import { saveNewAPI } from "../../services/API_apiManagement";

class Apimanagement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editVisible: true
    };
  }
  columns = [
    {
      title: "URL",
      dataIndex: "url"
    },
    {
      title: "Method",
      dataIndex: "method"
    },
    {
      title: "Describe",
      dataIndex: "describe"
    },
    {
      title: "Operation",
      dataIndex: "operation",
      width: 160,
      render: row => (
        <div className={styles.operation}>
          <Button icon="edit" onClick={() => this.showEidtModal(row)} />
          <Button icon="zoom-in" />
          <Button icon="link" />
        </div>
      )
    }
  ];
  // 编辑确定
  editHandleOk = async params => {
    let res = await saveNewAPI(params);
    console.log(res);
  };
  // 取消编辑
  editHandleCancel = () => {
    this.setState({
      editVisible: false,
      editConent: {}
    });
  };
  // 显示编辑框
  showEidtModal = editConent => {
    this.setState({
      editVisible: true,
      editConent: editConent ? editConent : {}
    });
  };
  render() {
    return (
      <div className={styles.container}>
        <div className={styles.handleRow}>
          <Button
            type="primary"
            icon="plus"
            onClick={() => this.showEidtModal()}
          >
            ADD
          </Button>
        </div>
        <Table
          rowKey="id"
          columns={this.columns}
          dataSource={[{ id: "sss" }]}
        />
        <ApiEdit
          visible={this.state.editVisible}
          handleOk={this.editHandleOk}
          handleCancel={this.editHandleCancel}
          defaultContent={this.state.editConent}
        />
        <ApiView />
      </div>
    );
  }
}

export default Apimanagement;
